<template> 
  <div class="container" >
     <div>
         <input class="form-control" placeholder="请输入用户名称" v-model="formData.userName">
         <input class="form-control" placeholder="请输入用户昵称" v-model="formData.niceName">
         <button class="btn"  @click="toggle"  title="切换语言"><el-icon><ArrowDown/></el-icon></button>
         <button class="btn"  @click="queryUserData" title="查询"><el-icon><Search/></el-icon></button>
        <deleteUserVue :user-list="userList" @getSelectData="getSelectData" @reback="queryUserData"></deleteUserVue>
     </div>
     <el-config-provider :locale="locale"> 
     <el-table ref="userTableRef" :data="tableData" :height="height" stripe style="width: 100%">
     <el-table-column type="selection" width="55"/>
     <el-table-column prop="userName" label="用户名称"/>
     <el-table-column prop="niceName" label="昵称"/>
     <el-table-column prop="email" label="邮箱"/>
     <el-table-column prop="mobile" label="手机号码" />
     <el-table-column fixed="right" label="操作" width="180">
       <template #default="scope"> 
         <a class="btn" title="编辑"><el-icon><Edit/></el-icon></a>
         <a class="btn" title="增加" > <el-icon><Plus/></el-icon></a>
         <a class="btn" title="删除" @click="deleteUser(scope.row)"> <el-icon><Delete/></el-icon></a>
       </template>
     </el-table-column> 
   </el-table> 
     <nav class="tr">
         <el-pagination
         v-model:current-page="formData.page"
         v-model:page-size="formData.rp"
         :page-sizes="[100, 20, 50, 100]"
         layout="sizes, prev, pager, next,total"
         :total="total"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"

         /> 
     </nav>
 </el-config-provider>
  </div>
 </template>
 <script>
 import { Edit,Plus,Search,ArrowDown,Delete } from '@element-plus/icons-vue'
 import deleteUserVue from './components/DeleteUser.vue'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import en from 'element-plus/dist/locale/en.mjs'
 import { reactive,toRefs,computed, ref } from 'vue'
  export default {
     name: 'APP',
     components:{
         Edit,Plus,Search,ArrowDown,deleteUserVue,Delete
     },
     data: function(){ 
     return {
         height:200,
          tableData:[],
          total:20,
          formData:{
             page:1,
             rp:10,
             userName:"",
             niceName:""
          },
          userList:[]
     }
     },
     methods:{
         queryUserData(){
             var that = this;
             window.http.post('/api/user/queryUserList',this.formData).then(res => {
                
                var data = res.data;
                that.tableData = data;
             }) 
             .catch(function(error){
                that.$message.error('服务器异常');
             });
             window.http.post('/api/user/queryUserTotal',this.formData).then(res => {
                
                var data = res.data;
                if(data.success){
                 that.total = data.total;
                }
             }) 
             .catch(function(error){
                that.$message.error('服务器异常');
             })
         },
         handleSizeChange(){
             this.queryUserData();
         },
         handleCurrentChange(){
             this.queryUserData();
         },
         getSelectData(){
            var array= this.$refs.userTableRef.getSelectionRows();
            this.userList=array;
         },
         deleteUser(row){
          console.info(JSON.stringify(row));
          this.userList.splice(0,this.userList.length);
          this.userList.push(row);
          this.$bus.emit("deleteUserById");
         },
     },
     mounted(){
         var app =document.getElementById("app");
         this.height=app.clientHeight-100;
         this.queryUserData();
     },
     updated(){
         console.log(" updated currentPage:" + this.currentPage + "\t pageSize:" + this.pageSize);
         
     },
     setup(){
         const language = ref('zh-cn')
         const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
         const toggle = () => {
         language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
         }
         return{
             language,
             locale,
             toggle,
         }
       }
     }
 </script>
 <style>
     html,
     body, 
     #app{
     height: 100%;
     }
 </style>
 <style scoped> 
     .container {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
 
  }
  .tr{
  width: 100%;
  flex-basis: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
 
  align-items: center;
  }
  .second{
  background-color: aqua;
  }
  .form-control{
     display: inline-block;
     width: 200px;
     margin-right: 10px;
  }
  .btn{
     margin-right: 5px;
 
  }
  
 </style> 